<template>
	<view class="indexBox">
		<go-top :scrollTop="scrollTop"></go-top>
		<pageheader :setting="settingdata"></pageheader>
		<view class="screen" v-if="showscreen" catchtouchmove="noneEnoughPeople">
			<view class="mask">
				<view class="" style="position: relative;">
					<image :src="screenlist[0].image" mode="widthFix" class="screenimg" @click="topath"></image>
					<image src="/static/img/closescreen.png" mode="" class="cimg" @click="closeScreen"></image>
				</view>
			</view>
		</view>
		<view class="boxContents">
			<view class="green_content">
				<view class="searchBox_sign">
					<navigator url="/home/index/search" hover-class="none" class="search_box">
						<u-icon name="search" color="#fff" size="30" class="search_icon"></u-icon>
						<text>搜索</text>
					</navigator>
					<view class="sign_box" @click="signday" v-if="!issignIn">
						<text class="iconfont icon-checkin"></text>

						<view class="sign_text">签到</view>
						<view class="sign_metion">送积分</view>
					</view>
					<view class="sign_box" v-else>
						<text class="iconfont icon-checkin"></text>
						<view class="sign_text">已签到</view>
					</view>
				</view>
			</view>
			<view class="swiper_index">
				<u-swiper :list="bannerimg" :autoplay="true" mode="none" :effect3d="false" height="380" interval="5000"
					border-radius="16" bg-color="transparent" @change="changeBanner" @click="clickswiper"></u-swiper>
			</view>
			<block v-for="(item,index) in homedata" :key="index">
				<!-- 最新公告 -->
				<view class="news_Box" v-if="item.type==1">
					<image src="/static/img/newlogo.png" mode="aspectFill" @click="tonews"></image>
					<!-- <u-notice-bar mode="vertical" type="none" :volume-icon="false" color="#4d4d4d" font-size="26"
						:is-circular="false" :list="noticelist" class="noticebox" @click="tonewdetail" more-icon
						@getMore="tonews">
					</u-notice-bar> -->
					<swiper class='swiper' autoplay="true" interval="5000" duration="1000" circular="true"
						vertical="true" display-multiple-items="2" style="height: 100%;">
						<block v-for="(item,index) in noticelist" :key="index">
							<swiper-item>
								<view class="text clamp1">{{item}} </view>
							</swiper-item>
						</block>
					</swiper>

					<view class="title_rights" @click="tonews">
						<text>更多</text>
						<u-icon name="arrow-right" color="#999999" size="26"></u-icon>
					</view>
				</view>
				<modal_menu :shortcut="menuList" v-if="item.type==5"></modal_menu>
				<view class="index_titlebox" v-if="item.type==2">
					<view class="title_content">
						<text class="textone">热门货品</text>
						<text class="texttwo">直供精品 欢迎看货</text>
					</view>
					<navigator url="/chat/hotgoods" hover-class="none" class="title_rights">
						<text>更多</text>
						<u-icon name="arrow-right" color="#999999" size="26"></u-icon>
					</navigator>
				</view>

				<view class="hots_Box" v-if="item.type==2">
					<navigator :url="'/home/index/supplydetail?id='+item2.id" hover-class="none" class="hots_one"
						v-for="(item2,index2) in item.list" :key="index2">
						<view class="hot_tag">热门</view>
						<!-- <image :src="item2.image" v-if="item2.image" mode="aspectFill" class="hots_oneBack"></image> -->
						<image v-if="item2.video_path.length==0||item2.image" :src="item2.image" mode="aspectFill" class="hots_oneBack"></image>
						<video v-if="item2.video_path.length>0&&item2.image==''" :src="item2.video_path[0]" :poster="item2.video_path[0]+'?vframe/jpg/offset/1'" initial-time='0.01' class="video hots_oneBack"  :autoplay="false" show-fullscreen-btn  controls="false"></video>
						
						<view class="hover_box">
							<image :src="item2.mimage" v-if="item2.mimage" mode="widthFix"></image>
							<view class="xinyong_box">
								<view class="xin">信</view>
								<view class="xin_number">{{item2.credit_value}}</view>
								<view class="shiming" v-if="item2.realname">实</view>
								<view class="qiye" v-if="item2.enterprise">企</view>
							</view>
						</view>
						<view class="clamp1 hot_name">{{item2.title}}</view>
						<view class="hot_info">
							<view class="hot_price">
								<!-- <text>￥</text>{{item2.money}}<text>/{{item2.unit}}</text> -->
								<text v-if="item2.money != '0.00'">￥{{item2.money}} / {{item2.unit}} </text>
								<text v-if="item2.money == '0.00'">电话询价</text>
							</view>
							<text class="hot_looks">{{item2.view}}人查看</text>
						</view>

						<view class="flex_bet_align">
							<view class="hot_citys clamp1">{{item2.city}}</view>
							<view class="hot_citys clamp1" v-if="item2.distance" style="margin-right: 6rpx;">
								{{item2.distance+'km'}}
							</view>
						</view>
					</navigator>
				</view>
				<view class="index_titlebox" v-if="item.type==3">
					<view class="title_content">
						<text class="textone">供应商推荐</text>
						<text class="texttwo">诚信经营 基地直供</text>
					</view>
					<navigator url="/home/index/suppliers" hover-class="none" class="title_rights">
						<text>更多</text>
						<u-icon name="arrow-right" color="#999999" size="26"></u-icon>
					</navigator>
				</view>
				<view class="recommend_Box" v-if="item.type==3">
					<view class="recommend_One" v-for="(item2,index2) in item.list" :key="index2">
						<navigator :url="'/home/station/stationpage?id='+item2.id" hover-class="none" class="recommend">
							<image :src="item2.images" v-if="item2.images" mode="aspectFill"></image>
							<view class="recommend_name">{{item2.shop_name}}</view>
							<view class="clamp2 recommend_des">{{item2.business}}</view>
						</navigator>
						<view class="recommend_signon" @click="attention(item2,index2,index)" v-if="item2.is_follow==1">
							已关注
						</view>
						<view class="recommend_sign" @click="attention(item2,index2,index)" v-else>+ 关注</view>
					</view>
				</view>
			</block>

			<u-sticky class="u-tabs-element" :offset-top="offTop">
				<u-tabs-swiper ref="uTabs" :list="navlist" bar-height="6" bar-width="40" active-color="#38BE8C"
					inactive-color="#222222" font-size="32" :current="current" @change="tabsChange">
				</u-tabs-swiper>
			</u-sticky>

			<view class="_sticky" :style="'top:'+navH+'px'">
				<view class="navbar_Box" id="tabBar">
					<view class="treesBox">
						<view class="tree_One" v-for="(item2,tags2) in treedata" :key="tags2"
							@click="gosupply(item2.id)">
							<image v-if="item2.video_path.length==0||item2.image" :src="item2.image" mode="aspectFill" class="hots_oneBack"></image>
							<video v-if="item2.video_path.length>0&&item2.image==''" :src="item2.video_path[0]" :poster="item2.video_path[0]+'?vframe/jpg/offset/1'" initial-time='0.01' class="video hots_oneBack"  :autoplay="false" show-fullscreen-btn  controls="false"></video>
							
							<view class="hover_box">
								<image :src="item2.mimage" v-if="item2.mimage" mode="widthFix"></image>
								<view class="xinyong_box">
									<view class="xin">信</view>
									<view class="xin_number">{{item2.credit_value}}</view>
									<view class="shiming" v-if="item2.realname">实</view>
									<view class="qiye" v-if="item2.enterprise">企</view>
								</view>
							</view>
							<view class="clamp1 hot_name">{{item2.title}}</view>
							<view class="hot_info">
								<view  class="hot_price">
									<text v-if="item2.money != '0.00'"><text>￥</text>{{item2.money}}<text>/{{item2.unit}}</text><text v-if="item2.car_type">/{{item2.car_type}}</text></text>
									<text v-if="item2.money == '0.00'">电话询价</text>
								</view>
								
								<text class="hot_looks">{{item2.view}}人查看</text>
							</view>
<!-- 							<view class="hot_citys clamp1 flex_bet_align">
								<text v-if="item2.category_name_0">货品种类:{{item2.category_name_0}}</text>
								<text v-if="item2.category_name_1">{{item2.category_name_1}}</text>
							</view> -->
							<!-- <view class="hot_citys clamp1">{{item2.city}}</view> -->
							<view class="hot_citys clamp1">{{item2.cityname}}</view>
							<!-- <text class="hot_looks">通话次数{{item2.call_num}}</text> -->
							<view class="hot_citys clamp1 flex_bet_align">
								<text>通话{{item2.call_num}}次</text>
								<text>{{item2.updatetime}}</text>
							</view>
							<!-- <view class="hot_citys clamp1" v-if="item2.distance">{{item2.distance+'km'}}</view> -->
						</view>
					</view>
					<!-- <swiper :current="swiperCurrent" :style="'height:'+swiperheight+'rpx;min-height:300px;'"
						@change="transition">
						<swiper-item class="swiper-item" v-for="(item, index) in navlist" :key="index">
							
						</swiper-item>
					</swiper> -->
				</view>
				<view class="nomore" v-if="nomore&&navlist.length>0">—— · 没有更多了 · ——</view>
			</view>
		</view>
		<pagetabbar :currentIndex="currentIndex" :unread="unread"></pagetabbar>
		<view v-if="signstatus" class="signbox">
			<image src="../../static/img/qd.png" mode="widthFix"></image>
			<view class="signScore">
				积分<text>+{{integral}}</text>
			</view>
			<view class="tomorrow" @click="signstatus = false">明天再来</view>
		</view>

		<!-- <u-popup mode="center" border-radius="16" v-model="update" :closeable="true" @close="closeTask">
			<view class="updatebox">
				<view class="flex_content_center">
					<image src="/static/img/logo.jpg" mode="" class="img"></image>
				</view>
				<view class="title m30">版本更新</view>
				<view class="m30">
					<scroll-view style="height: 200rpx;" scroll-y="true">
						更新的内容:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
					</scroll-view>
				</view>

				<view class="smallTitle m30" v-if="startProgress">
					<text>下载进度 : {{ downloadProgress }}%</text>
					<progress :percent="downloadProgress" stroke-width="6" />
				</view>

				<view class="btn m30" @click="handleUpdate" v-if="!startProgress">立即升级</view>
			</view>
		</u-popup> -->

		<!-- <cover-view class="coverbox">
			<cover-view class="shopinfo">
				<cover-view class="flex_bet_align">
					<cover-view class="flex">
						<cover-image src="" class="coimg"></cover-image>
						<cover-view class="title">
							<cover-view class="clamp1">
								{{shopInfo.shop_name}}的苗店
							</cover-view>
							<cover-view class="clamp1 bisine">
								主营业务: {{shopInfo.business}}
							</cover-view>
						</cover-view>
					</cover-view>
					<cover-view class="distan">
						6公里
					</cover-view>
					<cover-view class="closebox">
						<cover-view class="icons icon-guanbi"></cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="flex_bet_align cobtn">
					<cover-view class="flex_align">
						<cover-view class="iconfont icon-dianhua1 text"
							@click="dialing(shopInfo.client_uid,shopInfo.mobile)"></cover-view>
						打电话
					</cover-view>
					<cover-view class="flex_align">
						<cover-view class="icons icon-chuzuche text" @click=""></cover-view>
						去这里
					</cover-view>
				</cover-view>
			</cover-view>
		</cover-view> -->
	</view>
</template>

<script>
	import amapFile from "../../static/js/amap-wx.js"
	import App from '@/App.vue';
	import modal_menu from "@/components/navbarmenu.vue"
	var _this, shak, $paginator;
	export default {
		components: {
			modal_menu
		},
		data() {
			return {
				flag:0,
				swiperNum:null,
				unread: "",
				// 回到头部按钮距离
				scrollTop: 0,
				// 设置swiper高度
				swiperheight: 300,
				settingdata: {
					name: '',
					bgColor: '#35BF8D',
					titleColor: '#fff',
					showNav: false,
					showTypes: 0,
					position: "index",
					city: "",
				},
				city: "",
				currentIndex: 0,
				// banner参数
				bannerlist: [],
				bannerimg: [],
				// 上一个下标
				lastindex: 0,
				// 首页数据
				homedata: [],
				// 最新公告
				notice: [],
				noticelist: [],
				//金刚区
				menuList: [],
				navlist: [{
					name: '全部',
					id: 0
				}],
				current: 0,
				// 第列表swiper第几个选中
				swiperCurrent: 0,
				// 列表
				treedata: [],
				signstatus: false, //签到显示状态
				issignIn: false, //是否签到过
				navH: 0, // 弹窗定位高度
				// banner获取获取第几页
				pages: 1,
				// 没有更多
				nomore: false,
				//切换类型
				cate_id: 0,
				// 积分数量
				integral: 0,
				// 授权定位
				nopos: false,

				offTop: '',
				showscreen: true,

				screenlist: [], //开屏广告图
				update: true,
				downloadProgress: 0, // 下载进度
				downloadTask: null, // 下载任务
				startProgress: false, // 下载进行
			}
		},
		onLoad() {
			_this = this
			_this.navH = App.globalData.navHeight;

			// 计算吸顶的距离
			_this.menuH = App.globalData.menuH;
			_this.menuT = App.globalData.menuT;
			let CapHeight = (_this.menuH + _this.menuT)
			_this.offTop = CapHeight / (uni.upx2px(100) / 100);
			console.log(_this.offTop, 'offTop')

			console.log(wx.getStorageSync('is_openScreen'))
			if (wx.getStorageSync('is_openScreen')) {
				_this.getscreen()
			} else {
				_this.showscreen = false
			}

			_this.getbanner()

			// 判断是否有地址，有地址就请求，没有就只需onshow的
			if (wx.getStorageSync('address')) {
				const city = wx.getStorageSync('address').city
				_this.settingdata.city = city
				_this.city = city
				_this.getindex(city)
			}

			// 获取分类
			_this.getcatelist()
			// 是否签到过
			_this.isSignin()

		},
		onShow() {

			// 判断缓存是否有地址
			_this.$forceUpdate()
			if (wx.getStorageSync('address')) {
				const city = wx.getStorageSync('address').city
				_this.settingdata.city = city
				_this.city = city
				// 是否重新刷新地址请求
				if (wx.getStorageSync('index_onShow')) {
					wx.setStorageSync('index_onShow', false)
					_this.getindex(city)
				}
			} else {
				_this.getcity()
			}

		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			if (wx.getStorageSync('address')) {
				const city = wx.getStorageSync('address').city
				_this.settingdata.city = city
				_this.city = city
				_this.getindex(city)
			}
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getshopgoods()
			})
			// _this.getshopgoods()
		},
		methods: {
			closeScreen() {
				_this.showscreen = false
				wx.removeStorageSync('is_openScreen')
				console.log(111)
			},
			// 是否签到过
			isSignin() {
				if (uni.getStorageSync("client_uid")) {
					_this.$api.get("checksignin", {
						client_uid: uni.getStorageSync("client_uid")
					}).then(data => {
						_this.issignIn = data.code == 0 ? false : true
					});
				}
			},
			// 强制用户开启地址
			openLocation() {
				// 请求新的地址地址
				wx.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.userLocation']) {
							wx.showModal({
								content: '检测到您没打开定位权限，是否去设置打开？',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										wx.openSetting()
									}
								},
							});
						} else {
							_this.getcity()
						}
					}
				})
			},
			// 获取当前位置
			getcity() {
				new amapFile.AMapWX({
					key: App.mapkey
				}).getRegeo({
					success: function(data) {
						let address = data[0].regeocodeData.addressComponent
						wx.setStorageSync("address", {
							"city": address.city,
							"long": address.streetNumber.location.split(',')[0],
							"lat": address.streetNumber.location.split(',')[1]
						})
						_this.settingdata.city = address.city
						_this.city = address.city
						_this.getindex(address.city)
					},
					fail: function() {
						_this.openLocation()
					}
				})
			},
			// 获取头部banner
			getbanner() {
				_this.$api.get("getbannerlist", {
					page: _this.pages,
					position_type: 1,
					is_openScreen: 1,
					pagesize: 100
				}).then(data => {
					// console.log(data, 'banner')
					_this.bannerlist = data.list
					let imgs = []
					data.list.forEach(item => {
						imgs.push(item.image)
					})
					_this.bannerimg = imgs
					if (data.total_page > _this.pages) {
						_this.pages = _this.pages + 1
					} else {
						_this.pages = 1
					}
				});
			},

			getscreen() {
				_this.$api.get("getbannerlist", {
					page: _this.pages,
					position_type: 1,
					is_openScreen: 2,
					pagesize: 100
				}).then(data => {
					console.log(data, '开屏')
					_this.screenlist = data.list
				});
			},
			topath() {
				console.log(_this.screenlist[0], '屏跳')
				_this.click_shake(() => {
					uni.navigateTo({
						url: _this.screenlist[0].path
					})
				})
			},

			// 下一组banner 1
			changeBanner(index) {
				if (index == 2) {
					_this.lastindex = 1
				}
				if (_this.lastindex > 0 && index == 0) {
					_this.getbanner()
				}
			},
			// 点击banner
			clickswiper(e) {
				_this.click_shake(() => {
					uni.navigateTo({
						url: _this.bannerlist[e].path
					})
				})
			},
			// 获取首页数据
			getindex(city) {
				console.log(city, uni.getStorageSync("client_uid") ? uni.getStorageSync("client_uid") : 0)
				_this.$api.get("homepage", {
					city: city,
					client_uid: uni.getStorageSync("client_uid") ? uni.getStorageSync("client_uid") : 0,
					lat: wx.getStorageSync('address').lat,
					lon: wx.getStorageSync('address').long
				}).then(data => {
					_this.homedata = data
					console.log(data)
					data.forEach(item => {
						// 获取最新公告内容
						if (item.type == 1) {
							let noticelist = []
							_this.notice = item.list
							item.list.forEach(item2 => {
								noticelist.push(item2.name)
							})
							// _this.noticelist = noticelist
							_this.$set(_this,'noticelist',noticelist)
							console.log('noticelist',noticelist);
						}
						// 获取金刚区分类
						if (item.type == 5) {
							let menuList = []
							item.list.forEach(item2 => {
								menuList.push({
									brand_name: item2.name,
									url: item2.path,
									images: item2.image,
									world: item2.path ? (item2.path.indexOf("http") != -1 ?
										1 : 0) : 0
								})
							})
							_this.menuList = menuList
						}
					})
				});
				$paginator = new _this.$paginator(_this.$api)
				_this.getshopgoods(true)
			},
			// 根据分类id获取所属商品
			getshopgoods(firstLoad = false) {
				
				$paginator.getData('homecategoodslist', {
					city: _this.city,
					cate_id: _this.cate_id,
					lat: wx.getStorageSync('address').lat,
					lon: wx.getStorageSync('address').long
				}, (data) => {
					
					const {total_page} = data
						_this.swiperNum = Math.ceil(total_page / 10) 
						_this.flag +=1
						
						
					if (firstLoad) {
						_this.treedata = data.list ? data.list : []
						_this.getswiperheight()
					} else {
						_this.treedata = _this.treedata.concat(data.list)
						// 获取列表之后重新计算高度
						_this.getswiperheight()
					}
					_this.nomore = data.nomore
				})
				
				console.log(wx.getStorageSync('address'))
					if(_this.flag !== false) {
						
						if(_this.swiperNum === null || _this.flag <= _this.swiperNum) {
							
							
							
						}
					}
				
			},
			// 获取分类
			getcatelist() {
				_this.$api.get("getcatelist", {}).then(data => {
					data.forEach(item => {
						_this.navlist.push({
							name: item.name,
							id: item.id
						})
					})
				});
			},
			// 切换分类
			tabsChange(current) {
				// let current = e.detail.current;
				_this.current = current;
				_this.cate_id = _this.navlist[current].id
				_this.$refs.uTabs.setDx(current);
				_this.$refs.uTabs.setFinishCurrent(current);
				$paginator = new _this.$paginator(_this.$api)
				_this.getshopgoods(true)
				_this.current = current;
				// _this.scrollToDom()
				// _this.swiperCurrent = index;
				// _this.current = index;
				// _this.cate_id=_this.navlist[index].id
				// $paginator = new _this.$paginator(_this.$api)
				// _this.getshopgoods(true)
			},
			//滑动swiper
			transition(e) {
				let current = e.detail.current;
				_this.cate_id = _this.navlist[current].id
				_this.$refs.uTabs.setDx(current);
				_this.$refs.uTabs.setFinishCurrent(current);
				$paginator = new _this.$paginator(_this.$api)
				_this.getshopgoods(true)
				_this.current = current;
			},
			// 获取swiper高度
			getswiperheight() {
				_this.swiperheight = (Math.ceil(_this.treedata.length / 2) * 624) + 25
			},
			//最新公告
			tonews: function() {
				_this.click_shake(() => {
					uni.navigateTo({
						url: "/home/index/newlist"
					})
				})
			},
			//公告详情
			tonewdetail: function(e) {
				_this.click_shake(() => {
					uni.navigateTo({
						url: "/home/index/newdetail?id=" + _this.notice[e].id
					})
				})
			},
			//签到
			signday: function() {
				_this.$api.islogin(() => {
					_this.$api.get("signin", {}).then(data => {
						_this.integral = data.score
						_this.signstatus = true
						_this.issignIn = true
					});
				})
			},
			// 跳转到详情
			gosupply(id) {
				_this.click_shake(function() {
					uni.navigateTo({
						url: "/home/index/supplydetail?id=" + id
					})
				})
			},
			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},

			onShareAppMessage() {
				return {
					path: '/pages/index/index'
				}
			},
			onShareTimeline() {
				//分享朋友圈
			},

			attention(e, index2, index) {

				_this.$api.islogin(() => {
					_this.$api.get("savefollow", {
						select_type: 1,
						types: 3,
						id: e.id
					}).then(data => {
						_this.homedata[index].list[index2].is_follow = _this.homedata[index].list[index2]
							.is_follow == 0 ? 1 : 0
						// console.log(_this.homedata)
					});
				})
			},
			scrollToDom() {
				uni.createSelectorQuery()
				    .select(".indexBox")//对应外层节点
				    .boundingClientRect((container) => {
				        uni.createSelectorQuery()
				        .select(".u-tabs-element")//目标节点
				        .boundingClientRect((target) => {
				            uni.pageScrollTo({
								scrollTop: target.top - container.top,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
				            });
				        })
				        .exec();
				    })
				    .exec();
			},
			// handleUpdate() {
			// 	this.downloadProgress = 0
			// 	this.startProgress = true
			// 	// 创建下载任务对象
			// 	var downloadTask = uni.downloadFile({
			// 		url: 'https://image.malldx.com/1b85accd0b3062da003de8ea7d605d3d.apk',
			// 		success: (res) => {
			// 			if (res.statusCode === 200) {
			// 				console.log('下载成功');
			// 				// 保存下载的安装包
			// 				uni.saveFile({
			// 					tempFilePath: res.tempFilePath,
			// 					success: (res) => {
			// 						// 任务完成，关闭下载任务
			// 						downloadTask.abort();
			// 					}
			// 				})
			// 			}
			// 		}
			// 	})
			// 	// 进度条更新
			// 	downloadTask.onProgressUpdate((res) => {
			// 		this.downloadProgress = res.progress

			// 		if (res.progress == 100) {
			// 			console.log('下载进度' + res.progress);
			// 		}
			// 	})
			// },
			// closeTask() {
			// 	console.log(111, this.downloadProgress, this.downloadTask);
			// 	// this.downloadTask.abort()
			// 	// this.downloadTask = null
			// 	this.startProgress = false
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.coverbox {
		background: #eee;
		position: fixed;
		width: 100%;
		height: 480rpx;
		bottom: 0;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: env(safe-area-inset-bottom);

		.shopinfo {
			margin: 30rpx;
			font-size: 38rpx;

			.title {
				width: 370rpx;

				.bisine {
					font-size: 28rpx;
					margin-top: 20rpx;
				}
			}

			.coimg {
				width: 160rpx;
				height: 160rpx;
				background: #007AFF;
				margin-right: 30rpx;
				border-radius: 10rpx;
			}
		}

		.cobtn {
			margin-top: 30rpx;
			padding-top: 30rpx;
			border-top: 1px solid #bbb;
			font-size: 32rpx;

			.text {
				background: #EBF9F5;
				margin-right: 10rpx;
			}
		}

		.distan {
			font-size: 26rpx;
		}

		.closebox {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
		}
	}

	.screen {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		bounce: none; //禁止滑动

		.mask {
			width: 100%;
			height: 100%;
			padding: 325rpx 60rpx 0;
			position: absolute;
			top: 0;
			background: rgba(0, 0, 0, .8);
		}

		.screenimg {
			background-color: #bbb;
			width: 630rpx;
			border-radius: 20rpx;
		}

		.cimg {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: -12px;
			right: -12px;
		}
	}

	.indexBox {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.boxContents {
			flex: 1;
			background-color: #fff;
			padding-bottom: 98rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) + 160rpx);
			// overflow-y: auto;
			position: relative;

			.green_content {
				width: 100%;
				height: 200rpx;
				border-radius: 0 0 80rpx 80rpx;
				background-color: #38be8c;
				z-index: 0;
				// position: sticky;
				// top: 0;

				.searchBox_sign {
					padding: 22rpx 50rpx 0 39rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					.search_box {
						height: 58rpx;
						width: 500rpx;
						border-radius: 29rpx;
						background-color: #95D8BF;
						display: flex;
						flex-direction: row;
						align-items: center;
						z-index: 2;

						.search_icon {
							margin-left: 29rpx;
						}

						text {
							margin-left: 13rpx;
							color: #fff;
							font-size: 22rpx;
						}
					}

					.sign_box {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-left: 25rpx;
						position: relative;

						text {
							color: #fff;
							font-size: 32rpx;
						}

						.sign_text {
							margin-left: 9rpx;
							font-size: 28rpx;
							color: #fff;
							font-weight: bold;
						}

						.sign_metion {
							position: absolute;
							border-radius: 9rpx 9rpx 9rpx 0;
							padding: 0 4rpx;
							height: 22rpx;
							color: #fff;
							background: rgb(255, 159, 59);
							top: -10rpx;
							right: -36rpx;
							font-size: 14rpx;
							animation: actions 5s infinite;

							@keyframes actions {
								0% {
									transform: scale(0);
								}

								25% {
									transform: scale(1.1);
									transform: rotate(15deg);
								}

								50% {
									transform: scale(1);
									transform: rotate(0);
								}

								75% {
									transform: scale(1.1);
									transform: rotate(15deg);
								}

								100% {
									transform: scale(0);
								}
							}
						}
					}
				}
			}

			.swiper_index {
				height: 380rpx;
				width: 680rpx;
				margin-left: 35rpx;
				margin-top: -96rpx;
			}

			.news_Box {
				margin: 39rpx 25rpx 0 25rpx;
				display: flex;
				align-items: center;
				flex-direction: row;
				background: #FFFFFF;
				box-shadow: 0px 0px 27px 0px rgba(205, 205, 205, 0.3);
				border-radius: 8px;
				padding: 20rpx;
				height: 120rpx;

				image {
					width: 62rpx;
					height: 65rpx;
				}

				.noticebox {
					flex: 1;
				}

				.swiper {
					flex: 1;
					margin: 0 30rpx;
				}

				.title_rights {
					display: flex;
					flex-direction: row;
					align-items: center;

					text {
						font-size: 26rpx;
						color: #999999;
						margin-right: 10rpx;
					}
				}
			}

			.index_titlebox {
				margin: 37rpx 0 0 0;
				padding: 0 24rpx 0 28rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.title_content {
					display: flex;
					flex-direction: column;

					.textone {
						color: #222222;
						font-weight: bold;
						font-size: 36rpx;
					}

					.texttwo {
						color: #999999;
						font-size: 30rpx;
						margin-top: 10rpx;
					}
				}

				.title_rights {
					display: flex;
					flex-direction: row;
					align-items: center;

					text {
						font-size: 26rpx;
						color: #999999;
						margin-right: 10rpx;
					}
				}
			}

			.hots_Box {
				margin: 40rpx 25rpx 0 0;
				padding-bottom: 40rpx;
				border-bottom: 10rpx solid #f8f8f8;
				overflow-x: auto;
				display: flex;

				.hots_one {
					width: 430rpx;
					display: flex;
					flex-direction: column;
					margin-left: 25rpx;
					position: relative;

					.hot_tag {
						width: 83rpx;
						height: 48rpx;
						border-radius: 16rpx 0;
						text-align: center;
						line-height: 48rpx;
						color: #fff;
						background: #FF7171;
						font-size: 28rpx;
						position: absolute;
						top: 0;
						left: 0;
					}

					.hots_oneBack {
						width: 430rpx;
						height: 319rpx;
						border-radius: 16rpx;
					}

					.hover_box {
						margin-top: 22rpx;
						display: flex;
						flex-direction: row;
						align-items: center;

						image {
							height: 36rpx;
							max-width: 150rpx;
							margin-left: 9rpx;
						}

						.xinyong_box {
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-left: 8rpx;

							.xin {
								width: 30rpx;
								height: 30rpx;
								background: #00C575;
								border-radius: 3px 0 0 3rpx;
								text-align: center;
								line-height: 30rpx;
								color: #fff;
								font-size: 20rpx;
							}

							.xin_number {
								background-color: #fff;
								border: 2rpx solid #00C575;
								border-radius: 0 3rpx 3rpx 0;
								color: #00C575;
								font-size: 20rpx;
								text-align: center;
								height: 30rpx;
								line-height: 30rpx;
								min-width: 46rpx;
							}
						}
					}

					.hot_name {
						font-size: 28rpx;
						color: #222222;
						margin: 18rpx 10rpx 0;
					}

					.hot_info {
						margin: 18rpx 10rpx 0;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;

						.hot_price {
							font-size: 30rpx;
							color: #F73F3F;
							font-weight: bold;
							display: flex;
							flex-direction: row;
							align-items: flex-end;

							text {
								font-weight: normal;
								font-size: 24rpx;
							}
						}

						.hot_looks {
							font-size: 22rpx;
							color: #999999;
							margin-right: 6rpx;
						}
					}

					.hot_citys {
						margin-top: 18rpx;
						margin-left: 10rpx;
						color: #999999;
						font-size: 22rpx;
					}
				}
			}

			.recommend_Box {
				margin: 36rpx 25rpx 0 0;
				padding-bottom: 40rpx;
				overflow-x: auto;
				display: -webkit-box;

				.recommend {
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				.recommend_One {
					width: 250rpx;
					height: 390rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background: #F8F8F8;
					margin-left: 25rpx;
					position: relative;
					border-radius: 16px;
					padding: 0 15rpx;

					image {
						width: 105rpx;
						height: 105rpx;
						border-radius: 50%;
					}

					.recommend_name {
						color: #222222;
						font-weight: bold;
						font-size: 28rpx;
						margin-top: 31rpx;
						line-height: 35rpx;
						height: 35rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						width: 150rpx;
						text-align: center;
					}

					.recommend_des {
						color: #999999;
						font-size: 24rpx;
						margin-top: 15rpx;
						height: 60rpx;
						line-height: 30rpx;
						text-align: center;
					}
				}

				.recommend_signon {
					margin-top: 37rpx;
					width: 151rpx;
					height: 58rpx;
					border-radius: 29rpx;
					text-align: center;
					line-height: 54rpx;
					color: #38BE8C;
					background: #fff;
					border: 2rpx solid #38BE8C;
				}

				.recommend_sign {
					margin-top: 37rpx;
					width: 151rpx;
					height: 58rpx;
					border-radius: 29rpx;
					text-align: center;
					line-height: 58rpx;
					color: #fff;
					background: #38BE8C;
				}
			}

			._sticky {
				position: sticky;
				//暂时无效
			}

			.navbar_Box {
				padding-bottom: env(safe-area-inset-bottom);

				.treesBox {
					background: #FAFAFA;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
					padding: 0 25rpx 25rpx 25rpx;
					overflow-y: auto;
					height: 100%;

					.tree_One {
						width: 340rpx;
						display: flex;
						flex-direction: column;
						margin-top: 24rpx;
						background: #FFFFFF;
						border-radius: 15rpx;
						overflow: hidden;
						height: 600rpx;

						.hots_oneBack {
							width: 340rpx;
							height: 340rpx;
							border-radius: 16rpx 16rpx 0 0;
						}

						.hover_box {
							margin-top: 22rpx;
							display: flex;
							flex-direction: row;
							align-items: center;

							image {
								max-width: 100rpx;
								height: 36rpx;
								margin-left: 9rpx;
							}

							.xinyong_box {
								display: flex;
								flex-direction: row;
								align-items: center;
								margin-left: 8rpx;

								.xin {
									width: 30rpx;
									height: 30rpx;
									background: #00C575;
									border-radius: 3px 0 0 3rpx;
									text-align: center;
									line-height: 30rpx;
									color: #fff;
									font-size: 20rpx;
								}

								.xin_number {
									background-color: #fff;
									border: 2rpx solid #00C575;
									border-radius: 0 3rpx 3rpx 0;
									color: #00C575;
									font-size: 20rpx;
									text-align: center;
									height: 30rpx;
									line-height: 30rpx;
									padding: 0 6rpx;
								}
							}
						}

						.hot_name {
							font-size: 28rpx;
							color: #222222;
							margin: 18rpx 10rpx 0;
						}

						.hot_info {
							margin: 18rpx 10rpx 0;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
							// height: 40rpx;
							overflow: hidden;

							.hot_price {
								font-size: 30rpx;
								color: #F73F3F;
								font-weight: bold;
								display: flex;
								flex-direction: row;
								align-items: flex-end;

								text {
									font-weight: normal;
									font-size: 24rpx;
								}
							}

							.hot_looks {
								font-size: 22rpx;
								color: #999999;
								margin-right: 6rpx;
							}
						}

						.hot_citys {
							margin-top: 18rpx;
							margin-left: 10rpx;
							color: #999999;
							font-size: 22rpx;
						}
					}
				}
			}

		}

		.signbox {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background: rgba($color: #000000, $alpha: 0.8);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			z-index: 10003;

			image {
				width: 520rpx;
				height: 820rpx;
				animation: bulingbuling 0.5s;

				@keyframes bulingbuling {
					0% {
						transform: scale(0.5);
					}

					50% {
						transform: scale(1.1);
					}

					100% {
						transform: scale(1);
					}
				}
			}

			.signScore {
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;

				text {
					font-size: 52rpx;
					color: #FFEE4D;
					margin-left: 10rpx;
				}
			}

			.tomorrow {
				margin-top: 74rpx;
				width: 176rpx;
				height: 54rpx;
				text-align: center;
				line-height: 54rpx;
				border-radius: 27rpx;
				border: 2rpx solid #fff;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}

	.updatebox {
		width: 630rpx;
		padding: 40rpx 30rpx;
		// background: #FAFAFA;

		.img {
			width: 140rpx;
			height: 140rpx;
		}

		.title {
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
		}

		.m30 {
			margin-top: 30rpx;
		}

		.btn {
			margin-top: 30rpx;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			background: #35BF8D;
			border-radius: 20rpx;
			font-weight: 500;
		}
	}
</style>
